<template> 

     <el-date-picker v-if="showStyle=='origin'||showStyle==''||!showStyle" :type="type" :style="styleObj"  v-model="dateRange" :value-format="valueFormat" :format="format" 
      unlink-panels 
      :range-separator="rangeSepaSrator"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :default-range="[-30,0]"
      @change="onDateRangeChange"
      :picker-options="pickerOptions"   
      />    
   <span v-else :class="showStyle=='x'?{'field-box-x':true}:{'field-box':true}" >  
    <slot class="field-avater" name="avater">
      <el-avatar :size="size"  :class="{'dashed-circle':avaterCpd.isNull,disabled:disabled===true,enabled:disabled!==true}"  :icon="avaterCpd.icon" :style="{backgroundColor:avaterCpd.color}">{{avaterCpd.innerText}}</el-avatar> 
    </slot> 
    <span class="field-info"  :class="{disabled:disabled===true,enabled:disabled!==true}">
      <slot name="info" :value="myVal" > 
        <span v-if="showStyle=='x'">
          <div class="field-value">
            <slot name="value"> 
              <div  v-if="!avaterCpd.isNull">{{avaterCpd.innerText}}</div> 
              <div v-else class="label-font-color">无</div>
            </slot> 
          </div> 
          <div class="field-label">
              <slot name="label">{{label||'请选择日期'}}</slot>
          </div>  
        </span>
        <span v-else class="field-value">
          <slot name="value" :value="myVal" :field="{label:label,color:color,icon:icon,disabled:disabled,clearable:clearable}">
            <div  v-if="!avaterCpd.isNull">{{avaterCpd.innerText}}</div> 
            <div v-else class="label-font-color">无</div>
          </slot> 
        </span> 
      </slot>  
    </span>   
    <span v-if="disabled!==true" class="field-oper"  :class="{disabled:disabled===true,enabled:disabled!==true}">
          
        <el-date-picker :type="type" :style="styleObj"  v-model="dateRange" :value-format="valueFormat" :format="format" 
            unlink-panels 
            :range-separator="rangeSepaSrator"
            :start-placeholder="startPlaceholder"
            :end-placeholder="endPlaceholder"
            :default-range="[-30,0]"
            @change="onDateRangeChange"
            :picker-options="pickerOptions"   
            />  
    </span>
  </span>  
</template>

<script> 
import util from '../js/util.js' 
import {MdpFieldMixin} from "../mixin/MdpFieldMixin.js" 
export default {
  name: 'mdp-date-range-x',  
  mixins:[MdpFieldMixin],   
  computed: {
        avaterCpd(){  
            var isEmpty=!this.myVal||this.myVal.length==0
            var obj={isNull:isEmpty,icon:this.icon?this.icon:'full-screen',color:this.color?this.color:'#E4E7ED',innerText:''} 
            if(isEmpty){
                return obj;
            }else{
                if(this.color){
                    obj.color=this.color
                }else{
                    obj.color= util.getColorById(this.myVal) 
                }

                if(this.icon){
                    obj.icon=this.icon
                }else{
                    obj.icon=''
                } 
                obj.innerText=this.myVal.join(this.rangeSepaSrator)
            } 
            return obj;
        }, 
        myVal:{
          set(val){    
            
            var mv={}
            if(this.startKey){
              if(val==null){
                if(this.modelValue==null){
                  this.$emit('change',null)
                  this.$emit('change2',null)
                  this.$emit('update:modelValue',null)
                }else{ 

                  Object.assign(mv,this.modelValue)
                  mv[this.startKey]=null
                  mv[this.endKey]=null
                  this.$emit('change',mv)
                  this.$emit('change2',mv)
                  this.$emit('update:modelValue',mv)
                }
                return;
              }
              mv[this.startKey]=val[0]
              mv[this.endKey]=val[1]
              if(this.modelValue==null){
                this.$emit('change',mv)
                this.$emit('change2',mv)
                this.$emit('update:modelValue',mv)
              }else{  
                var m2=Object.assign({},this.modelValue)
                Object.assign(m2,mv)
                this.$emit('update:modelValue',m2)
                this.$emit('change',mv)
                this.$emit('change2',m2)
              }
            }else{
              this.$emit('change',val)
              this.$emit('change2',val)
              this.$emit('update:modelValue',val)
            } 
          },
          get(){
            var myVal=[,];
            if(this.startKey){
              if(this.modelValue){
                return [this.modelValue[this.startKey]||'',this.modelValue[this.endKey]||'']
              }else{
                return [,]
              }
            }else{
              if(this.modelValue){
                return this.modelValue
              }else{
                return [,]
              } 
            } 
        }
     },
  },
  data(){
      return { 
        dateRange:['',''],
      }
  },
  watch:{ 
    dateRange(v){
      this.myVal=v
    }
  },
  props: {
    
      showAvater:{
          type:Boolean,
          default:true,
      },
      disabled:{
        type:Boolean,
        default:false,
      },
    modelValue: {
      type: Object,Array,
      default: function(){
        return null
      }
    }, 
    label:{
      type:String,
      default:'起止时间',
    },
    type: {
      type: String,
      default: 'daterange'
    }, 
    startKey: {
      type: String,
      default: null
    }, 
     
    styleObj:{
        typeof:Object,
        default:function(){return { maxWidth:'100%' }}
    },
    
    endKey: {
      type: String,
      default: null
    }, 
    
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss'
    }, 
    
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    }, 
    startPlaceholder: {
      type: String,
      default: '开始日期'
    }, 
    
    endPlaceholder: {
      type: String,
      default: '结束日期'
    }, 
    rangeSepaSrator:{ 
      type: String,
      default: '~'
    },
    pickerOptions:{
        typeof:Object,
        default:function(){return util.getPickerOptions('datarange')}
    },
    autoDefault:{
        type:Boolean,
        default:false,
    },
    defaultRange:{
        type:Array,
        default:function(){
            return [-15,15]
        }
    },
    icon:{
      type:String,
      default:'date'
    }
  },
  methods: { 
      formatDateRange(myVal){
        if(!myVal||myVal.length==0){
          return ""
        }else{
          if(myVal.length==1){
            return util.formatDate(new Date(myVal[0]),this.format)
          }else if(myVal.length==2){
             return util.formatDate(new Date(myVal[0]),this.format)+this.rangeSepaSrator+util.formatDate(new Date(myVal[1]),this.format)
          }
        }
      },
      initData(){ 
        this.dateRange=this.myVal
          if(this.autoDefault===true || (this.autoDefault!==false && this.defaultRange && this.defaultRange.length==2)){
              var now=new Date();
              var start=new Date(); 
              var end=new Date(); 
              start.setTime(now.getTime() + 3600 * 1000 * 24 * this.defaultRange[0]);
              end.setTime(now.getTime() + 3600 * 1000 * 24 * this.defaultRange[1]);
              var myVal=[]
              myVal.push(start)
              myVal.push(end) 
              this.myVal=myVal
          } 
           
      },
      onDateRangeChange(dates){ 
        debugger
         this.myVal=dates
      }, 
  },
  mounted(){
      this.initData();
  }
}
</script>

<style lang="scss" scoped>  
  @import url('../index.scss');
</style>
